<script setup lang="ts">
import cloud_geometry from '@/assets/images/cloud/design/cloud_geometry.png';
</script>

<template>
  <div class="cloud_banner">
    <div class="container">
      <div class="bannerBody">
        <div class="left">
          <h2 class="title1">国际云专线</h2>
          <div class="title2">
            <span> 自建海外POP点实现24H快速开通 </span>
          </div>
          <span class="content"
            >“云桥通”实现了全球云网一体化布局，在中国、日韩、东南亚、欧美等地的多个云节点城市部署了入云节点，为客户实现全方位快速全球云网络业务的多点部署。</span
          >
        </div>
        <div class="right">
          <img v-lazy="cloud_geometry" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.cloud_banner {
  width: 100%;
  height: 100vh;
  background-image: url('@/assets/images/cloud/banner/banner_cloud.png');
  background-size: cover; /* 自动裁剪图片至容器大小，保持宽高比 */
  background-repeat: no-repeat;
  background-position: center center; /* 将图片内容始终居中显示 */

  .container {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;

    .bannerBody {
      display: flex;
      justify-content: space-between;
      .left {
        width: 736px;
        .title1 {
          font-family: 'SourceHanSansCN-Bold';
          font-size: 56px;
          color: #1d4e8c;
        }
        .title2 {
          background-image: linear-gradient(91deg, #83eaf1 0%, #63a4ff 100%);
          border-radius: 42px;
          width: 597px;
          height: 83px;
          text-align: center;
          margin-top: 56px;
          margin-bottom: 90px;

          span {
            font-family: 'SourceHanSansCN-Regular';
            font-size: 36px;
            color: #1d4e8c;
            line-height: 83px;
          }
        }
        .content {
          font-family: 'SourceHanSansCN-Regular';
          font-size: 20px;
          color: #424142;
          line-height: 36px;
        }
      }
    }
  }
}

// xl(1200px)至xxl(1600px)
@media screen and (min-width: 1201px) and (max-width: 1600px) {
  .container {
    width: 85%;
  }
}

// lg(992px)至xl(1200px)
// 0 - 1200px
@media screen and (max-width: 1200px) {
  .container {
    width: 95%;
    .bannerBody {
      // justify-content: center;
      .left {
        display: flex;
        flex-direction: column;
        align-items: center;
      }
      .right {
        display: none;
      }
    }
  }
}
</style>
